<template>
  <div>
    <el-header>
      <div style="width: 1200px;margin: 0 auto;">
        <div style="float: left" class="logo">
          <a href="index"></a>
        </div>
        <div style="float: left">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   text-color="#0aa1ed">
            <el-submenu index="2">
              <template slot="title">地区</template>
              <el-submenu index="2-1">
                <template slot="title">宁波</template>
                <el-menu-item index="2-1-1">海曙区</el-menu-item>
                <el-menu-item index="2-1-2">江东区</el-menu-item>
                <el-menu-item index="2-1-3">江北区</el-menu-item>
                <el-menu-item index="2-1-4">镇海区</el-menu-item>
                <el-menu-item index="2-1-5">北仑区</el-menu-item>
                <el-menu-item index="2-1-6">鄞州区</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="3"><a href="detail">买车</a></el-menu-item>
            <el-menu-item index="4"><a href="saleCar">卖车</a></el-menu-item>
            <el-menu-item index="5"><a href="forumIndex">论坛</a></el-menu-item>
            <el-menu-item index="6"><a href="serviceGuarantee">服务保障</a></el-menu-item>
            <el-menu-item index="7"><a href="partnerView">加盟合伙人</a></el-menu-item>
          </el-menu>
        </div>
        <div id="logoright" style="float: right">
          <span>400-026-9017</span>
          <el-divider direction="vertical"></el-divider>
          <a href="login" style="text-decoration: none;position: relative;
                            top: -5px" id="login">登录</a>
        </div>
      </div>

    </el-header>
    <el-main>
      <div class="main1" style="margin: 230px auto;text-align: left">
        <div style="background-color: white;width: 1200px;height: 36px;"></div>
        <div>
          <span><a style="text-decoration: none;margin: 10px 5px 0 50px;font-size: x-large;
                        color: #ff6d24;text-shadow: 1px 1px 1px #ff6d24;" href="">我要买车!</a>
          </span>
          <div class="search-box">
            <el-row class="demo-autocomplete">
              <el-col :span="24">
                <el-autocomplete
                    class="inline-input"
                    v-model="select.keywords"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="searchResult"
                    style="border:0px;"
                ></el-autocomplete>
                <div class="search-btn1">
                  <el-button icon="el-icon-search"
                             style="border: 0px;color:#FFFFFF;background-color: rgba(0,0,0,0);"@click="searchByKeywords(1,pageSize)"></el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="fontBtn">
            <div class="font1">
              <a href="">3万以下</a>
              <a href="">3-5万</a>
              <a href="">5-10万</a>
              <a href="">10-15万</a>
              <a href="">15-20万</a>
              <a href="">20-30万</a>
              <a href="">30-60万</a>
              <a href="">60万以上</a>
            </div>
            <div class="font2"><img style="padding-left: 60px;width: 60px;position: relative;top: 3px"
                                    src="https://img1.rrcimg.com/1562747510pc.png" alt="">
              <a href="">降价车</a>
              <a href="">准新车</a>
              <a href="">急售车</a>
              <a href="">紧凑型车</a>
              <a href="">中大型车</a>
              <a href="">豪华车</a>
              <a href="">超值SUV</a>
            </div>
            <div class="font3">
              <a href="searchResult?keywords=大众">大众</a>
              <a href="searchResult?keywords=别克">别克</a>
              <a href="searchResult?keywords=宝马">宝马</a>
              <a href="searchResult?keywords=丰田">丰田</a>
              <a href="searchResult?keywords=福特">福特</a>
              <a href="searchResult?keywords=本田">本田</a>
              <a href="searchResult?keywords=吉利">吉利汽车</a>
            </div>
            <div class="carLogo">
              <img style="margin-left: 65px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/20_1644479532455@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/26_1644479531778@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/22_1644479529842@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/10_1644479533813@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/8_1644479534453@2x.png" alt="">
              <img style="margin-left: 60px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/18_1644479531079@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/17_1644479537549@2x.png" alt="">
              <div style="margin: -26px 0 0 625px;">
                <el-row class="">
                  <el-col :span="12">
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <div class="font4">
                          <el-dropdown-item><a href="searchResult?keywords=奔驰">奔驰</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=阿尔法罗密欧">阿尔法·罗密欧</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=奥迪">奥迪</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=保时捷">保时捷</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=野马">野马</a></el-dropdown-item>
                        </div>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 420px;height: 270px;margin: -192px 0 0 750px">
          <div>
            <a style="text-decoration: none;font-size: x-large;
                        color: #ff6d24;text-shadow: 1px 1px 1px #ff6d24;"href="saleCar">我要卖车!</a>
          </div>
          <div style="width: 300px;margin-top: 30px;">
            <el-input
                placeholder="请输入手机号"
                v-model="input"
                clearable>
            </el-input>
          </div>
          <div class="saleCar">
            <a href="/saleCar"><div class="saleCarBtn">
              卖车
            </div></a>
            <div>
              <a href=""><img class="saleCar-img" style="" src="//img2.rrcimg.com/dist/pc/images/index/baomai-img-289fd832.png" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <div>
      <div class="car-list-wrapper">
        <div class="car-list-container">
          <div class="car-list-container-title">
            <span style="float: left;font-size: 22px;color: rgba(0,0,0,.8);text-shadow: 1px 1px 1px rgba(0,0,0,.20);">好车推荐</span>
            <span style="float: left;width: 2px;height: 20px;background: rgba(0,0,0,.07);border-radius: 1px;margin: 5px 0 0 25px;"></span>
            <div>
              <el-menu :default-active="activeIndex2" class="el-menu-demo2" mode="horizontal" @select="handleSelect2">
                <el-menu-item index="特价">特价好车</el-menu-item>
                <el-menu-item index="低调">低调时尚</el-menu-item>
                <el-menu-item index="驾驶">驾驶乐趣</el-menu-item>
                <el-menu-item index="SUV">超值SUV</el-menu-item>
                <el-menu-item index="奢华">奢华享受</el-menu-item>
              </el-menu>
            </div>
            <div>
              <div>
                <el-row style="margin-left: -200px;width: 1200px;height: 690px;">
                  <el-col :span="2" v-for="(item, index) in carArr" :key="index" :offset="4"class="">
                    <el-card :body-style="{ padding: '0px' }"class="card-box">
                      <div><img :src="item.url" class="card-box-image"></div>
                      <div style="padding: 14px;">
                        <span>{{item.carLogo}}</span>
                        <div class="bottom clearfix">
                          <div><p class="card-box-time">{{item.model}}</p></div>
                          <div>
                            <p style="margin-top: 45px"><span style="font-size: 20px;color: coral;">{{item.price}}万元
                                                    </span>
                              <span style="font-size: 14px;color: rgba(0,0,0,.36);">{{item.course}}万公里</span>
                              <span><el-button type="text" class="card-box-button">咨询</el-button></span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
                <div style="width: 50%;margin: 405px auto">
                  <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div id="r-footer" style="">
      <div class="r-footer-container">
        <div class="baozhang"></div>
        <div class="link-clearfix">
          <div class="link-left">
            <div class="link-left_item">
              <div class="link-left_item-title">关于我们</div>
              <ul>
                <li><a href="">公司介绍</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">加入我们</a></li>
                <li><a href="">加盟合伙人</a></li>
              </ul>
              <ul>
                <li><a href="">用户服务协议</a></li>
                <li><a href="">隐私政策</a></li>
                <li><a href="">法律声明</a></li>
                <li><a href="">协议及声明</a></li>
              </ul>
            </div>
            <div class="link-left_item" style="width: 140px">
              <div class="link-left_item-title">交易流程</div>
              <ul>
                <li><a href="">买车流程</a></li>
                <li><a href="">卖车流程</a></li>
                <li><a href="">异地购车</a></li>
              </ul>
            </div>
            <div class="link-left_item">
              <div class="link-left_item-title">二手车精选</div>
              <ul>
                <li><a href="">车型库</a></li>
                <li><a href="">二手车资讯</a></li>
                <li><a href="">二手车问答</a></li>
              </ul>
              <ul>
                <li><a href="">二手车估价</a></li>
                <li><a href="">二手车迁入标准</a></li>
              </ul>
            </div>
          </div>
          <div class="link-right">
            <div class="link-right_tel">
              <div class="number">400-039-6051</div>
              <div class="time">周一至周日 9:00-18:00</div>
              <div class="text">免费咨询(咨询、建议、投诉)</div>
            </div>
            <div class="link-right_app">
              <div class="r-item">
                <span>关注微信</span>
                <div class="lazyload">
                  <img src="/images/salecar_img/wechat.jpg" alt="" style="width: 100%;">
                </div>
              </div>
              <div class="r-item">
                <span>下载APP</span>
                <div class="lazyload">
                  <img src="/images/salecar_img/down-app.png" alt="" style="width: 100%;">
                </div>
              </div>
            </div>
            <div class="link-right_sns">
            </div>
          </div>
        </div>
      </div>
      <div id="r-footer-copyright">
        <div class="r-footer-copyright-container">
          <img src="/images/salecar_img/wangbei.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchResult",
  data: function () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      dq: "海曙区",
      restaurants: [],
      select: {
        keywords: '',
      },
      input: '',
      carArr: [],
      total: 10,
      currentPage: 1,
      pageSize:12,
      isSelect:false
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect2(key) {
      let url = "http://localhost:5081/cars/showKey?key="+key;
      console.log(url);
      this.axios.get(url).then((response)=>{
        console.log(response.data);
        let jsonResult = response.data;
        this.carArr = jsonResult.data;
        this.carArr = this.carArr.slice(0,8);
      })
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "奔驰C级"},
        {"value": "奔驰E级"},
        {"value": "奔驰GLC"},
        {"value": "奔驰GLE"},
        {"value": "奔驰S级"},
        {"value": "迈巴赫"},
        {"value": "奥迪A4L"},
        {"value": "奥迪A6L"},
        {"value": "奥迪Q5L"},
        {"value": "奥迪A8"},
        {"value": "奥迪R8"},
        {"value": "宝马3系"},
        {"value": "宝马5系"},
        {"value": "路虎"},
        {"value": "野马"},
      ];
    },
    searchResult(){
      this.restaurants = this.loadAll();
    },
    searchByKeywords(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/cars/select?'+this.qs.stringify(this.select)+ '&page='+page+'&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
    handleCurrentChange(val) {
      if(this.isSelect){
        this.searchByKeywords(val,this.pageSize);
      }else {
        this.pageSelect(val,this.pageSize)
      }
    },
    pageSelect(page,pageSize){
      let url = 'http://localhost:5081/cars/select?page='+page+'&pageSize='+pageSize;
      this.axios.get(url).then((response)=>{
        let jsonResult = response.data();
        if (jsonResult.state == 200){
            let data = jsonResult.data;
            this.currentPage = data.page;
            this.total = data.total;
        }else {
            this.$alert(jsonResult.message,'操作失败',{
               confirmButtonText:'确定',
              callback:action => {}
            })
        }
      })
    }
  },

  created: function () {
    if (location.search.indexOf("dq=") != -1) {
      let dqs = location.search.split("dq=");
      let dq = dqs[1];
      this.dq = dq;
    }
    if(location.search.indexOf("keywords=")!=-1){
      this.select.keywords = decodeURI(location.search.split("keywords=")[1]);
    }

    /*this.axios.get("http://localhost:5081/cars/list").then((response)=>{
      console.log(response.data);
      this.carArr = response.data;
    })*/
    this.searchByKeywords(1,12);
    this.searchResult();
  },

}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url("/public/images/indexImage/background.jpg");
  background-repeat: no-repeat;
  width: 100%;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0;
  color: #ff6d24;
}

.el-menu a {
  font-size: 18px;
  text-decoration: none;
}

#logoright * {
  color: white;
  float: right;
  margin-top: 20px;
}

#login {
  margin-top: 22px;
}

.logo {
  float: left;
  width: 100px;
  display: block;
  height: 58px;
  background-image: url("/public/images/indexImage/logo.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: 0px;
}

.logo:hover {
  overflow: hidden;
  background-position-y: -60px;
}

.dl:hover {
  background-color: #ff6d24;
  font-size: 30px;
  width: 80px;
  height: 45px;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 10px;
  text-align: center;
  box-shadow: 2px 2px 3px #ff6d24;
}

.main1 {
  width: 1200px;
  height: 269px;
  background-color: white;
  border-radius: 10px;
  border: 0 solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.search-box {
  display: inline-block;
  background-color: #ff6d24;
  color: white !important;
  position: absolute;
  height: 37px;
  width: 200px;
  border-radius: 10px;
  padding: 5px;
}

.search-btn1 {
  position: relative;
  margin-left: 145px;
  bottom: 40px;
}

.el-autocomplete input {
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  color: white;
}

.el-autocomplete input::placeholder {
  color: white;
}

.fontBtn a:hover {
  color: #ff6d24;
}

.font1 {
  height: 36px;
  padding: 50px 0 0 50px;
}

.font1 a {
  font-size: 16px;
  text-decoration: none;
  color: black;
  padding: 10px;
}

.font2 {
  margin-top: 10px;
  width: 700px;
  height: 40px;
}

.font2 a {
  margin-left: 10px;
  font-size: 15px;
  text-decoration: none;
  color: black;
  padding: 8px;
}

.font3 {
  padding-left: 60px;
}

.font3 a {
  margin-left: 10px;
  font-size: 14px;
  text-decoration: none;
  color: black;
  padding: 18px;
}

.fontBtn img {
  width: 18px;
}

.carLogo {
  margin-top: -17px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #b2bec3;
}

.el-dropdown-link:hover {
  color: #ff6d24;
}

.font4 a {
  text-decoration: none;
  color: black;
  font-size: 14px;
}

.el-input__inner:focus {
  border-color: #ff6d24;
}

.saleCarBtn {
  width: 115px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
  background: #FF6B23;
  border-radius: 1px 4px 4px 1px;
  color: #fff;
  font-size: 18px;
  border: none;
  margin: -130px 0 0 301px;
  font-weight: 400;
  cursor: pointer;
}

.saleCarBtn:hover {
  background-color: #d35400;
}

.saleCar-img {
  width: 400px;
  height: 61px;
  position: relative;
  top: 30px;
}

.saleCar-img:hover {
  cursor: pointer;
  border-radius: 100px;
  box-shadow: 0 5px 15px #bdc3c7;
}

.car-list-wrapper{
  width: 100%;
  height: 1200px;
  background: #F8F8F8;
  margin-top: -190px;
  padding-top: 41px;
}

.car-list-container{
  width: 1200px;
  margin: 0 auto;
}
.car-list-container:before{
  line-height: 0;
  display: table;
  content: '';
}
.car-list-container-title{
  width: 1200px;
  height: 39px;
}

.list-container-title-font{
  font-size: 30px;
  text-decoration: none;
  color: #222;
  position: relative;
  top: 4px;
}

.el-menu-demo2{
  margin:-15px 0 0 40px;
  background-color: #F8F8F8;
}
.el-menu--horizontal>.el-menu-item.is-active{
  color: rgba(0,0,0,.6);
}
.el-menu--horizontal>.el-menu-item.is-active:hover{
  color: coral;
}
.el-menu--horizontal>.el-menu-item.is-active:focus{
  color: coral;
}
.el-menu.el-menu--horizontal{
  border-style: none;
}

.card-box{
  width: 290px;
  height: 331px;
  margin-bottom: 10px;
}
.card-box:hover{
  box-shadow: 0 8px 15px 0 rgba(0,0,0,.15);
  cursor: pointer;
}

.card-box-time {
  font-size: 13px;
  color: #999;
}

.card-box-button {
  float: right;
}

.card-box-image {
  width: 100%;
  height: 192px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}


#r-footer {
  background-color: #4c4c4c;
  width: 100%;
  height: 400px;
}

.r-footer-container {
  width: 1200px;
  height: 320px;
  margin: 0 auto;

}

.baozhang {
  height: 74px;
  font-size: 16px;
  color: #fff;
  background-image: url("/public/images/salecar_img/b1.png");
}

.link-clearfix {
  width: 1200px;
  height: 160px;
  margin: 40px auto;
}

.link-left {
  width: 758px;
  height: 123px;
  float: left;
}

.link-left a {
  text-decoration: none;
}

.link-left a:hover {
  color: #ff6d24;
}

.link-left_item {
  width: 300px;
  height: 123px;
  margin-bottom: 6px;
  display: inline-block;
  vertical-align: top;
}

.link-left_item-title {
  width: 234px;
  height: 21px;
  font-size: 16px;
  color: #fff;
  margin: 0 0 10px 0;
}

ul {
  display: inline-block;
  padding: 0;
  margin: 0 40px 0 0;
  vertical-align: top;
}

li {
  line-height: 24px;
  font-size: 14px;
  list-style: none;
}

li > a {
  color: #adadad;
}

.link-right {
  float: right;
  width: 440px;
  position: relative;
}

.link-right_tel {
  width: 160px;
  float: left;
  color: #fff;
}

.number {
  font-size: 22px;
  line-height: 34px;
  margin-top: 20px;
}

.time {
  font-size: 14px;
}

.text {
  font-size: 12px;
  line-height: 24px;
  margin: 5px 0 0;
  color: #979797;
}

.link-right_app {
  float: left;
  width: 272px;
  height: 136px;
}

.r-item {
  width: 88px;
  float: left;
  text-align: center;
  margin-left: 32px;
}

.r-item > span {
  color: #bbbbbb;
  padding-bottom: 8px;
  margin: 0 auto;
}

.lazyload {
  margin: 8px 0 24px 0;
  width: 88px;
  height: 88px;
}

.link-right_sns {
  display: block;
  float: left;
  width: 424px;
  height: 24px;
  background-image: url("/public/images/salecar_img/sns1.png");
}

#r-footer-copyright {
  width: 100%;
  height: 80px;
  font-size: 12px;
  color: #fff;
  background-color: #2f2f2f;

}

.r-footer-copyright-container {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
</style>